<html>
<head>
    <title>Circle w/ dataset</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAheS9Xi-Yv_ZyWjQrMAtLyxSXi3ULrnowvlcblO1CcYDzFprW4BSmWEaCS455H93bNLDyyoFMFv3drw" type="text/javascript"></script>
    <script type="text/javascript" language="javascript" src="js/CircleOverlay.js"></script>
    <script type="text/javascript" language="javascript" src="js/latlng.js"></script>
<script type="text/javascript" language="javascript" src="js/OpenError.js"></script>
<script type="text/javascript" language="javascript" src="js/datasets.js"></script>
<script type="text/javascript" language="javascript">
				
// <testing>
	var r = document.getElementById("results");
// </testing>
    
	var map;
	var oe;
	var disp;
	


var d;

function DrawObjects()
{
	var data = oe.generateDataset(); // generate a new data set with offset errors
	var original = oe.getDataSet(); // this seems redundant, but lets us change which data set we're using in the main load function alone

	// draw initial set of points
	disp.addPoints();
	
	for(var i =0;i<data.length;i++)
	{
		// create data for circle object
		// TODO: move this as createCircles() function to disp object
		var circle = new CircleOverlay(new GLatLng(original.coordinates[i][0],original.coordinates[i][1]), (oe.getStandardDeviation() / 1609.344), "#336699", 1, 1, '#336699', 0.25);
			
		var c = new CObject();
		c.overlay = circle;
		c.sd = 1;
		disp.c_objects.push(c);
		
	}
	
	// show points and circles by default
	disp.showPoints();
	disp.showCircles();
}
	
	
    //<![CDATA[
    
    function LPObject()
    {
    	this.point; // GMarker object
    	this.origin; // GLatLng object
    	this.line;
    	this.visible = false;
    }
    
    function CObject()
    {
    	this.overlay;
    	this.visible = false;
    	this.sd; // number of standard deviations out
    }
    
    // -----
    // Object to hold the values for changing and rearranging display elements such as circles, lines.
    // -----
    function DispObject()
    {
    	this.map_id = "map";    	
    	this.c_objects = new Array();
    	this.circles_display = 0; // or 1 or 2 or 3
    	
    	this.lp_objects = new Array();
    	
		this.showCircles = function()
		{
			for(var i=0;i<this.c_objects.length;i++)
			{
				if(this.c_objects[i].visible == false)
				{
					map.addOverlay(this.c_objects[i].overlay);
					this.c_objects[i].visible = true;
				}
			}
		}

		this.hideCircles = function()
		{
			for(var i=0;i<this.c_objects.length;i++)
			{
				if(this.c_objects[i].visible == true)
				{
					map.removeOverlay(this.c_objects[i].overlay);
					this.c_objects[i].visible = false;
				}
			}
		}
	
		// functions for POINTS / LINES
		this.showPoints = function()
		{
			for(var i=0;i<this.lp_objects.length;i++)
			{
				if(this.lp_objects[i].visible == false)
				{
					map.addOverlay(this.lp_objects[i].point);
					this.lp_objects[i].visible = true;
				}
			}
		}

		this.hidePoints = function()
		{
			for(var i=0;i<this.lp_objects.length;i++)
			{
				if(this.lp_objects[i].visible == true)
				{
					map.removeOverlay(this.lp_objects[i].point);
					this.lp_objects[i].visible = false;
				}
			}
		}
		
		this.addPoints = function()
		{
			var data = oe.generateDataset(); // generate a new data set with offset errors
			var original = oe.getDataSet(); // this seems redundant, but lets us change which data set we're using in the main load function alone
			var x;
			for(var i =0;i<data.length;i++)
			{
				// Create our "tiny" marker icon
				//var blueIcon = new GIcon(G_DEFAULT_ICON);
				//blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
				//blueIcon.iconSize = new GSize(32,32);
				//blueIcon.shadow = "";
				//blueIcon.shadowSize = new GSize(0,0);
				//blueIcon.infoWindowAnchor = new GPoint(4,4);
				//blueIcon.anchor = new GPoint(2,2);


				//-add point to map v2
				var marker = new GMarker( new GLatLng(data[i].lat,data[i].lon) );//,{icon:blueIcon});
				var origin = new GLatLng( original.coordinates[i][0],original.coordinates[i][1]);
				var lp = new LPObject();
				lp.point = marker;
				lp.origin = origin;
				this.lp_objects.push( lp );
			}
			this.showPoints();
		}
		
		this.recalculatePoints = function()
		{
			// hide and remove the old points
			this.hidePoints();             // hide the markers so that multiple objects do maintain
			this.lp_objects = new Array(); // resets the lp_objects object
			
			// add a new set of points
			this.addPoints();
		}
    	

    	
    	// make sure that the first argument is a string type
    	//if(typeof arguments[0] === "string")
    	//{
    	//	this.map_id = arguments[0]; // set the string value of div holding the map canvas
    	//}
    	
    	
    	
    	
		
    	this.addCircle = function()
    	{
    		
    		// check to make sure the argument is a 
    		if(typeof arguments[0] === "function")
    		{
    			this.circles.push( arguments[0] );
    		}
    	};
    	
    };
    
    
    
    
    function load() {
       // if (isCompatible) {
            // Create Map
            map = new GMap2(document.getElementById("map"));
            var zoom = 5;
            map.setCenter(new GLatLng(5, 5), zoom);

            // Add controls
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
			

			
			// create a new openerror object for introducing controlled error
			oe = new OpenError();
			oe.setDistanceDataSet(dist);
			oe.setDataSet(ptsOne);  // var created on dataset.js file
			oe.setStandardDeviation(100000 ); //1609.344);
			oe.setDebug(true);
			oe.setCorrelated( false );
			//oe.set
			
			disp = new DispObject("map");
			DrawObjects();
			
			for(var i=0;i<9;i++)
			{
				disp.addPoints();
			}

        //}
    }
    //]]>
    </script>
<style>
table,tr,td,th
{
	border: solid 1px gray;
}
</style>
</head>
<body onLoad="load()" onUnload="GUnload()">
	<div style="margin:auto;text-align:center;">
		<div id="mapWrapper" style="float: left;">
			<div id="map" style="width: 400px; height: 300px; border: 1px solid #666666;"></div>
		</div>
		<div style="margin-left: 400px;text-align:left">
			<strong>Points: </strong>
			<input type="button" onclick="disp.showPoints();" value="Show">
			<input type="button" onclick="disp.hidePoints();" value="Hide"><br/><br/>
			<strong>Circles: </strong>
			<input type="button" onclick="disp.showCircles();" value="Show">
			<input type="button" onclick="disp.hideCircles();" value="Hide"><br/>
			<div id="results"></div>
		</div>
		<div style="clear:both;"></div>
	</div>
	<div id="debug"></div>
</body>
</html>